<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="" />
  <meta name="author" content="" />

  <title>山水图片展示样式</title>

  <link href="css/demo.css" rel="stylesheet" />
  <link href="css/ionicons.min.css" rel="stylesheet" />
  <link href="css/flutter.css" rel="stylesheet" />
</head>

<body>
  <section>
    <div class="flutter-container">
      <div class="col-flut-2">
        <figure class="Flutters flutEffect_1">
          <img src="images/10.jpg" alt="sample7" />
          <div class="overlay">
            <a href="#lightbox-1"><i>a</i></a>
            <a href="#lightbox-1"><i>a</i></a>
            <a href="#lightbox-1"><i>a</i></a>
          </div>
        </figure>
        <div class="flutter-lightbox" id="lightbox-1">
          <a href="#" class="close-me"></a>
          <img src="images/01.jpg" alt="sample7" />
        </div>
      </div>

      <div class="col-flut-2">
        <figure class="Flutters flutEffect_2">
          <img src="images/12.jpg" alt="sample7" />
          <div class="overlay">
            <a href="#lightbox-2"><i>a</i></a>
          </div>
        </figure>
        <div class="flutter-lightbox" id="lightbox-2">
          <a href="#" class="close-me"></a>
          <img class="flutter-full-img" src="images/02.jpg" alt="sample7" />
        </div>
      </div>

      <div class="col-flut-2">
        <figure class="Flutters flutEffect_3">
          <img src="images/11.jpg" alt="sample7" />
          <div class="overlay">
            <a href="#lightbox-3"><i>a</i></a>
          </div>
        </figure>
        <div class="flutter-lightbox" id="lightbox-3">
          <a href="#" class="close-me"></a>
          <div class="flutter-full-content">
            <h2>Better Represent your Art Work.</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
              commodo ligula eget dolor. Aenean massa. Cum sociis natoque
              penatibus et magnis dis parturient montes, nascetur ridiculus
              mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
              quis, sem. Nulla consequat massa quis enim. Donec pede justo,
              fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
              rhoncus ut, imperdiet a, venenatis vitae, justo.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="flutter-container">
      <div class="col-flut-2">
        <figure class="Flutters flutEffect_4">
          <img src="images/17.jpg" alt="sample7" />
          <div class="overlay">
            <h2><span>Responsive</span> Design</h2>
            <p>Fully responsive and work well.</p>
            <a href="#"></a>
          </div>
        </figure>
      </div>

      <div class="col-flut-2">
        <figure class="Flutters flutEffect_5">
          <img src="images/09.jpg" alt="sample7" />
          <div class="overlay">
            <h2><span>Responsive</span> Design</h2>
            <p>Fully responsive and work well.</p>
            <a href="#"></a>
          </div>
        </figure>
      </div>
      <div class="col-flut-2">
        <figure class="Flutters flutEffect_6">
          <img src="images/08.jpg" alt="sample7" />
          <figcaption>
            <h2> <span></span> </h2>
            <p></p>
            <a href="#"></a>
          </figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section>
    <div class="flutter-container">
      <div class="col-flut-2">
        <figure class="Flutters flutEffect_7">
          <img src="images/02.jpg" alt="sample7" />
          <figcaption>
            <div class="overlay">
              <h2>坚持走 <span>绿色发展之路</h2>
            </div>
            <div class="overlay">
              <p>共筑生态文明之基</p>
            </div>
            <a href="#"></a>
          </figcaption>
        </figure>
      </div>
      <div class="col-flut-2">
        <figure class="Flutters flutEffect_8">
          <img src="images/04.jpg" alt="sample7" />
          <figcaption>
            <div class="overlay">
              <h2>
                This is <span>real</span> fun of <span>Make</span> Effects
              </h2>
            </div>
            <div class="overlay">
              <p>乡村美景</p>
            </div>
            <a href="#"></a>
          </figcaption>
        </figure>
      </div>

      <div class="col-flut-2">
        <figure class="Flutters flutEffect_9">
          <img src="images/13.jpg" alt="sample7" />
          <figcaption>
            <div class="overlay">
              <a href="#lightbox-9"><i>a</i></a>
              <a href="#lightbox-9"><i>a</i></a>
              <a href="#lightbox-9"><i>a</i></a>
            </div>
            <h2>
              坚持走绿色发展之路， <span>共筑生态文明之基</span> your web.
            </h2>
          </figcaption>
        </figure>
        <div class="flutter-lightbox" id="lightbox-9">
          <a href="#" class="close-me"></a>
          <div class="flutter-small-content">
            <h2></h2>
            <p>

            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="flutter-container">
      <div class="col-flut-2">
        <figure class="Flutters flutEffect_10">
          <img src="images/11.jpg" alt="sample7" />
          <figcaption>
            <div class="overlay">
              <a href="#"><i>三</i></a>
              <a href="#"><i>板</i></a>
              <a href="#"><i>河</i></a>
            </div>
            <h2>岭南风情 <span>水乡</span> 文化</h2>
          </figcaption>
        </figure>
      </div>

      <div class="col-flut-2">
        <figure class="Flutters flutEffect_11">
          <img src="images/03.jpg" alt="sample7" />
          <figcaption>
            <div class="overlay">
              <h3>Where?</h3>
            </div>
            <div class="overlay">
              <div class="icons">
                <a href="#"><i>成</i></a>
                <a href="#"><i>太</i></a>
                <a href="#lightbox-4"><i>广场</i></a>
              </div>
            </div>
          </figcaption>
          <div class="center">
            <i>成</i>
          </div>
        </figure>
        <div class="flutter-lightbox" id="lightbox-4">
          <a href="#" class="close-me"></a>
          <iframe src="images/13.jpg" width="100%" height="100%" frameborder="0" style="border: 0"
            allowfullscreen></iframe>
        </div>
      </div>

      <div class="col-flut-2">
        <figure class="Flutters flutEffect_12">
          <img src="images/01.jpg" alt="sample7" />
          <figcaption>
            <div class="overlay">
              <img src="images/01.jpg" alt="sample7" />
            </div>
            <h2><span>缓缓流淌的三板河穿村而过</span></h2>
          </figcaption>
          <a href="#"></a>
        </figure>
      </div>
    </div>
  </section>
</body>

</html>